<template>
        <!-- 顶部标题信息 -->
        <div class="header-title">
            <van-icon name="records-o" color="#ffff" />
            <span>职业健康检查信息表</span>
        </div>
        <!-- 人员基本信息 -->
        <div class="header-personinfo">
            <van-notice-bar scrollable> 
                <!-- 通知栏 左侧icon -->
                <template #left-icon>
                    <van-icon name="user" />
                    <span class="user-name">{{ loginPersonInfo.sca06 || '未获取到姓名' }}</span>
                </template>
                <!-- 通知栏文本内容 -->
                <template #default>
                    <div class="calendar-title-container">
                        <!-- 性别 -->
                        <span v-show="loginPersonInfo.abw02">
                            <b> {{loginPersonInfo.abw02}} /</b>
                        </span>
                        <!-- 年龄 -->
                        <span v-show="loginPersonInfo.sca12">
                            <b> {{loginPersonInfo.sca12}} /</b>
                        </span>
                        <!-- 民族 -->
                        <span v-show="loginPersonInfo.abq02">
                            <b> {{loginPersonInfo.abq02}} /</b>
                        </span>
                        <!-- 身份证号码 -->
                        <span v-show="loginPersonInfo.sca22">
                            <b> {{loginPersonInfo.sca22}} /</b>
                        </span>
                        <!-- 移动电话 -->
                        <span v-show="loginPersonInfo.sca26">
                            <b> {{loginPersonInfo.sca26}} /</b> 
                        </span>
                        
                    </div>
                </template>
            </van-notice-bar>
        </div>


        <!-- 初始化未获取到scf01 交互 Dialog对话框 -->
        <van-dialog 
            v-model:show="dialogShow" 
            title="请输入客户编码" 
            show-confirm-button 
            confirmButtonText="查询" 
            @confirm="confirmDialogInputFn"
            :before-close="beforeCloseDialogInputFn" 
        >
            <van-field v-model="inputScf01" type="number" placeholder="请输入客户编码..." @update:model-value="inputScf01Fn" />
            <div class="showToastText" v-show="isShowToast">
                <span>{{ showToastText }}</span>
            </div>
        </van-dialog>

</template>
  
<script setup>
import { useStore } from 'vuex';
import { ref, reactive, toRefs, onMounted, defineProps, defineExpose } from 'vue';
import request from '@/api/request.js';
import { GetRequest, getUrlKey } from '@/utils/tools.js'
import { showDialog } from 'vant';
import { cloneDeep,isEmpty } from 'lodash';

    const store = useStore();   
    const loginPersonInfo = ref({
        sca06: '姓名', //姓名
        abw02: '性别', //性别
        sca12: '年龄',  //年龄
        abq02: '民族', //民族
        sca22: '身份证号码',//身份证
        sca26: '移动电话',//移动电话
    });
    const dialogShow = ref(false);
    const inputScf01 = ref('');
    const showToastText = ref('');
    const isShowToast = ref(false);


    onMounted(() => {
        debugger
        let scf01= GetRequest('scf01') || ''; // 获取url携带参数scf01
        let dbNumber= GetRequest('db') || ''; // 获取url携带参数数据库数字

        updateDatabaseNumber(dbNumber);

        if (scf01 && dbNumber) {
            getUserInfo(scf01);
        } else {
            dialogShow.value = true;
        }
    })

    // 信息输入过程中 隐藏提示
    const inputScf01Fn =() => {
        if (inputScf01.value) {
            showToastText.value = '';
            isShowToast.value = false;
        }
    }

    // 交互输入客户编码scf01确认查询
    const confirmDialogInputFn = () => {
        debugger;
        if (inputScf01.value) {
            let scf01 = inputScf01.value;
            getUserInfo(scf01);
        } else {
            isShowToast.value = true;
            showToastText.value =  inputScf01.value ? '' : '未输入信息，无法查询用户！'
        }
    }

    // 输入框关闭前的回调信息，可阻止dialog关闭
    const beforeCloseDialogInputFn = (res) => {
        debugger;
        console.log(res);
    }

    // 根据scf01获取用户基本信息
    const getUserInfo = async (scf01) => {
        // 获取当前scf01客户基本信息
        await request.get("/hea/getHeaData",{scf01: scf01}).then(res => {
            if (res.result != 'Success') {
                dialogShow.value = true;
                isShowToast.value = true;
                showToastText.value = '查询失败了, 请重新尝试！'
                return;
            };
            debugger;
            let userInfo = res.map.guestDetails || {};

            if (isEmpty(userInfo)) {
                dialogShow.value = true;
                isShowToast.value = true;
                showToastText.value = '暂未查询到用户信息！'
            } else {
                dialogShow.value = false;
                isShowToast.value = false;
                showToastText.value = '';
            };

            loginPersonInfo.value.sca06 = userInfo.sca06; //姓名
            loginPersonInfo.value.abw02 = userInfo.abw02; //性别
            loginPersonInfo.value.sca12 = userInfo.sca12; //年龄
            loginPersonInfo.value.abq02 = userInfo.abq02; //民族
            loginPersonInfo.value.sca22 = userInfo.sca22; //身份证号码
            loginPersonInfo.value.sca26 = userInfo.sca26; //移动电话

            let signBase64Img = userInfo.ped85 || '';  //电子签名
            updateUserInfo(); // 更新vuex中用户信息
            updateUserSignature(signBase64Img); //更新vuex中电子签名
        }).catch(err => {
            dialogShow.value = true;
            isShowToast.value = true;
            showToastText.value = '查询失败了, 请重新尝试！'
        });
    };

    const updateUserInfo = () => { // 更新vuex中用户基本信息
      store.dispatch('Userinfo/updateUserInfo', loginPersonInfo.value);
    };

    const updateUserSignature = (signBase64Img) => { // 更新vuex中用户电子签名
      store.dispatch('Userinfo/updateUserSignature', {ped85:signBase64Img});
    };
    const updateDatabaseNumber = (dbNumber) => { // 更新vuex中数据库编码
      store.dispatch('Userinfo/updateDatabaseNumber', {dbNumber:dbNumber});
    };

    defineExpose({
        loginPersonInfo: loginPersonInfo.value,
    })

</script>

<style scoped>
        .header-title {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100px;
            background-color: #3eafe0;

            .van-icon {
                font-size: 60px;
            }
    
            span {
                font-size: 30px;
                color: #fff;
                font-weight: 800;
            }
        }

        .header-personinfo {
            .van-notice-bar {
                width: 100%;
            }

            .user-name {
                padding-right: 35px;
            }

            display: flex;
            align-items: center;
            height: 50px;
            box-shadow: 10px -10px 50px #ffff;
            border-bottom: 1px solid #ddd;

            span, i {
                font-size: 28px;
                margin-right: 8px;
                font-weight: 700;

            }
        }

        .showToastText {
            display: flex;
            align-items: center;
            justify-content: center;
            color: rosybrown;
            font-size: 25px;
            font-weight: 700;
        }
</style>